<template>
    <div class="rights">
        <Table border :cols="cols" :data="rolesData">
            <template #level="{row,$index,column}">
                <el-tag v-if="row.level == 0" size="large">一级</el-tag>
                <el-tag v-if="row.level == 1" size="large" type="success">二级</el-tag>
                <el-tag v-if="row.level == 2" size="large" type="warning">三级</el-tag>
            </template>
        </Table>
    </div>
</template>
<script setup>
import Table from '@/components/Table.vue'
import { onMounted,ref } from 'vue'
import { getRights } from '@/utils/rights.js'
// 列
const cols = [
    {
      title:'序号',
      type:'index',
      align:'center',
      width:60
    },
    {
        title:'权限名称',
        name:'authName',
        align:'center',
    },
    {
        title:'路径',
        name:'path',
        align:'center',
    },
    {
        title:'权限说明',
        slot:'level',
        align:'center',
    }
]
// 表格
const rolesData = ref([]);
// 渲染
const getRightsList = async ()=>{
    var {data:res} = await getRights('list');
    // console.log(res)
    rolesData.value = res;
}

onMounted(() => {
    getRightsList();
})


</script>
<style lang="scss" scoped>
</style>